<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<title>创建客户-客户信息</title>
		<meta http-equiv="expires" content="0">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<link rel="stylesheet" href="../../../css/reset.css" />
		<link rel="stylesheet" href="../../../css/mui.min.css" />
		<link rel="stylesheet" href="../../../css/mui.picker.min.css" >
		<link rel="stylesheet" href="../../../css/mui.poppicker.css" />
		<link rel="stylesheet" href="../../../css/iconfont.css" />
		<link rel="stylesheet" href="../../../css/cmms.css" />
		<link rel="stylesheet" href="../../../css/sale/clinci/createQuali.css" />
		<link rel="stylesheet" href="../../../css/sale/clinci/createClinic.css?time=20191023" />
		<script src="../../../js/vconsole.min.js"></script>
	</head>
	<style type="text/css">
		input{
			margin: 0;
		}
		.mui-badge1{padding:0px; width:65%; float:right; line-height:42px; font-size:14px;}
		#createDocter .labBox{
			
		}
		#createDocter .labBox>div{
			padding: 4px 0;
		}
		#createDocter .labBox>div:nth-child(1){
			/* height: 30px; */
			line-height: 30px;
			display: flex;
			justify-content: flex-start;
		}
		#createDocter .labBox>div:nth-child(1)>label{
			width: 60px;
		}
		#createDocter .labBox>div:nth-child(1)>span{
			font-size: 14px;
			padding: 0 15px;
			color: #C2C2C2;
			line-height: 30px;
		}
		#createDocter .labBox>div:nth-child(2){
			/* height: 30px; */
			line-height: 30px;
			display: flex;
			justify-content: space-between;
		}
		#createDocter .labBox>div:nth-child(2)>span:first-child{
			width: 60px;
		}
		#createDocter .labBox>div:nth-child(2)>span:nth-child(2){
			width: 60px;
			color: #C2C2C2;
		}
		#createDocter .labBox>div:nth-child(2)>input{
			margin: 0;
			height: 28px;
			border: none;
			font-size: 14px;
			width: 60%;
			color: #C2C2C2;
		}
		#createDocter .labBox>div:nth-child(2)>span>i{
			font-size: 12px;
		}
	</style>
	<body>
		<div class="mui-content" id="createDocter" v-cloak>
			<div class="mui-slider">
				<nav class="topNav">
			    	<ul>
			    		<li><a href="#clinicInfo" :class="{'highlight':titleShow}">客户信息</a></li>
			    		<li><i class="iconfont icon-chakangengduo" ></i></li>
			    		<li><a href="#doctorInfo" :class="{'highlight':!titleShow}">医生信息</a></li>
			    	</ul>
			    </nav>
			  <div class="itemGroup">
			      <!-- 具体内容 -->
			      <div id="item1" :class="{'hidden':modelHide}">
				    <div class="panel">
				    	<ul class="mui-table-view mianInfo" >
						    <li class="mui-table-view-cell">客户名称<input type="text" v-model="clinName" /></li>
						    <li class="mui-table-view-cell">客户编码<input type="text" v-model="clinCode" /></li>
						    <li class="mui-table-view-cell">普检结算比率<input type="number" v-model="settleRatio" /></li>
								<li class="mui-table-view-cell">特检结算比率<input type="number" v-model="specialSettleRatio" /></li>
						    <li class="mui-table-view-cell">许可证号<input type="text" v-model="licenseNo" /></li>
						    <li class="mui-table-view-cell">许可证地址<input type="text" v-model="licenseAddress" /></li>
						    <li class="mui-table-view-cell" @tap="selectExpire">许可证到期时间<input type="text" v-model="licenseExpiredDateString" readonly unselectable="on"/>
						    	<span ><i class="icon iconfont icon-date right"></i></span>
						    </li>
						    <li class="mui-table-view-cell singleListItem3" @tap="selectAdress">客户地址<input type="text" v-model="addressList" placeholder="(选择地区)" readonly unselectable="on" />
						    	<span class="right" ><i class="iconfont icon-chakangengduo"></i></span>
						    </li>
							<li class="mui-table-view-cell addDetail">
								<input type="text" name="" v-model="address" placeholder="详细地址(如街道、小区、乡镇、村)" />
							</li>
							<li class="mui-table-view-cell" @tap="selectPriceType">价格体系<input type="text" v-model="priceTypeName" placeholder="(选择价格体系)" readonly unselectable="on"/>
								<span ><i class="icon iconfont icon-chakangengduo right"></i></span>
							</li>
							<li class="mui-table-view-cell labBox" v-for="account,acIndex in accountArr">
								<div>
									<label>实验室</label>
									<span>
										{{account.labName}}
									</span>
								</div>
								<div @tap="selectCodePre(account,acIndex)">
									<span>条码前缀</span>
									<input type="text" v-model="account.codePreName"  readonly unselectable="on"/>
									<span ><i class="icon iconfont icon-chakangengduo right"></i></span>
								</div>
							</li>
							<li class="singleListItem5">
								<div>请上传医疗机构执业许可证</div>
								<ul>
									<li v-for="src in imgSrcs" class="localImg">
										<i class="iconfont icon-jianqu" @tap="delwxIMG(index)"></i>
										<img :src="src" alt="执业许可证" @tap="getImg(src)" />
									</li>
									<li @tap="uploadImg"><i class="icon iconfont icon-xiangji1"></i></li>
								</ul>
							</li>
				    	</ul>
				    </div>
				    <div class="nextBtn">
				    	<button v-show="btnShow" class="btn-light" @tap="next">下一步 填写客户信息</button>
				    	<button v-show="!btnShow" class="btn-gray">下一步 填写客户信息</button>
				    </div>
			      </div>
			    <div id="item2" :class="{'hidden':!modelHide}">
				    <div class="panel">
				    	<ul class="mui-table-view mianInfo" >
						    <li class="mui-table-view-cell">
						    	<span class="tips">姓名</span>
						    	<input type="text" v-model="doctorName" @keyup="getDoctorInput"/></li>
						    <li class="mui-table-view-cell singleListItem3" @tap="selectSex">
						    	<span class="tips">性别</span>
						    	<input type="text" v-model="sexMsg" @keyup="getDoctorInput" readonly unselectable="on"/><span  class="right"><i class="iconfont icon-chakangengduo"></i></span></li>
						    <li class="mui-table-view-cell ">
						    	<span class="tips">联系电话</span>
						    	<input type="tel" v-model="phone" @keyup="getDoctorInput"></li>
						    <li class="mui-table-view-cell singleListItem3" @tap="selectClinLeader">
						    	<span class="tips">医生科室</span>
						    	<input type="text" v-model="clinLeader" @keyup="getDoctorInput" readonly unselectable="on" /><span class="right" ><i class="iconfont icon-chakangengduo"></i></span></li>
						    <!--<li class="mui-table-view-cell singleListItem3" @tap="selectClinYear">
						    	<span class="tips">从业年限</span>
						    	<input type="text" v-model="clinYearMsg" @keyup="getDoctorInput" readonly unselectable="on" /><span class="right" ><i class="iconfont icon-chakangengduo"></i></span></li>
						    <li class="mui-table-view-cell singleListItem3" @tap="selectGoodDisease">
						    	<span class="tips">擅长病种</span>
						    	<input type="text" v-model="goodDisease" @keyup="getDoctorInput" readonly unselectable="on" /><span class="right" ><i class="iconfont icon-chakangengduo"></i></span></li>		    -->
						</ul>
				    </div>
					<p class="panel intro">
				    	简介<textarea rows="5" cols="5" placeholder="可输入你的专长、经历或荣誉等" v-model="proprietorSummary" @keyup="getDoctorInput"></textarea>
				    </p>	
				    <p class="nextBtn">
				    	<button v-show="submitShow" class="btn-light " @tap="submit">提交</button>
				    	<button v-show="!submitShow" class="btn-gray ">提交</button>
				    </p>
			    </div>
			  </div>
			</div>
			<div id="successSubmit" v-show="show4">
				<ul>
					<li class="item1">
						<i class="icon iconfont icon-xuanzhong1"></i>
					</li>
					<li class="item2">提交成功</li>
					<li class="item3">提交成功后将自动返回首页</li>
				</ul>
			</div>
		</div>
		<script src="../../../js/mui.min.js"></script>
		<script src="../../../js/mui.picker.min.js"></script>
		<script src="../../../js/mui.poppicker.js"></script>
		<!--<script src="../../../js/city.data-3.js"></script>-->
		<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
		<script src="../../../js/vue.js"></script>
		<script src="../../../js/cmms.js?time=333"></script>
		<script>
			new Vue({
				el:"#createDocter",
				data:{
					codePreName:'(请选择条码前缀)',
					codePresId:'',
					clinName:'',
					clinCode:'',
					licenseNo:'',
					settleRatio:1,
					settleRatio1:1,
					labId:0,
					labName:'',
					labs:[],
					priceTypeName:'',
					priceTypeId:'',
					priceTypeList:[],
					address:'',
					licenseAddress:'',//许可证地址
					imgIds:[],
					imgSrcs:[],
					addressList:'',
					addressArr:{
						provinceCode:'',//省编号
						provinceName:'',//省名称
						cityCode:'',//城市编号
						cityName:'',//城市名
						areaName:'',//区名
						areaCode:''//区编码
					},
					licenseExpiredDateString:'',//许可证到期时间
					doctorName:'',
					sexMsg:'',//性别显示
					sexValue:'',//性别1：女，2：男
					clinLeader:'',
					clinLeaderCode:0,
					clinLeaders:[],//科室集合
					clinYear:'',
					clinYearMsg:'',//从业年限页面显示
					goodDisease:'',
					phone:'',
					proprietorSummary:'',
					isShow:false,
					titleShow:true,//标题切换
					modelHide:false,//主体切换
					btnShow:false,//按钮显示
					submitShow:false,//提交按钮显示
					str:'',
					ClinLeaderStr:'',
					show4:false,
					cityData:[],//省市区三级
					codePresArr:[],
					accountArr:[
					// 	{
					// 	labId:75,
					// 	labName:'南平大叔大婶',
					// 	list:[
					// 		{
					// 			id:8,
					// 			code:'999001'
					// 		},
					// 		{
					// 			id:6,
					// 			code:'798465'
					// 		}
					// 	]
					// },
					],
					accountList:[
						// {
						// 	"labAccountId": 0,
						// 	"labId": 0,
						// 	"priceTypeId": 0
						// }
					],
					specialSettleRatio:1
				},
				watch:{
					clinName:'judegeIsNull',
					licenseNo:'judegeIsNull',
//					settleRatio:'judegeIsNull',
					priceTypeId:'judegeIsNull',
					licenseAddress:'judegeIsNull',
					addressList:'judegeIsNull',
					licenseExpiredDateString:'judegeIsNull',
					imgIds:'judegeIsNull',
					address:'judegeIsNull',
					doctorName:'getDoctorInput',
					sexMsg:'getDoctorInput',
					phone:'getDoctorInput',
					clinLeader:'getDoctorInput',
//					clinYear:'getDoctorInput',
//					goodDisease:'getDoctorInput'
				},
				mounted(){
					// var vConsole = new VConsole();
					this.muiInit();
				},
				methods:{
					muiInit(){
						let _this = this;
						mui('.mui-slider-group').scroll({
							indicators: true //是否显示滚动条
						});
						AT.muiAjax('/partner-sale/partnerSale/wxConfig','post',{url:location.href.split('#')[0]},function(res){
							wx.config({
								appId:res.appId,
								timestamp:res.timestamp,
								nonceStr:res.nonceStr,
								signature:res.signature,
								jsApiList:['chooseImage','uploadImage','previewImage']
							});
							
						});
						/*价格体系*/
						AT.muiAjax('/partner-sale/partnerSale/listAllPriceType','post',{},function(res){
							console.log(res);
							_this.selectPriceList=res;
							// _this.labName=res[0].name;
							// _this.labId=res[0].id;
							console.log(_this.selectPriceList);
							// _this.getAccount(_this.labId);
						});
						/*科室*/
						AT.muiAjax('/common/common/selectDictDataListByDictCode','post',{
							typeCode: "hospital_offices"
						},function(res){
							console.log(res);
							_this.clinLeaders = res;
							_this.clinLeader = res[0].name;
							_this.clinLeaderCode = res[0].code;
						});
					},
					judegeIsNull(){
						let _this = this;
						// &&( _this.imgIds.length>=1)
						if((_this.clinName.length>=1)&&( _this.licenseNo.length>=1)&&( _this.licenseAddress.length>=1)&&( _this.licenseExpiredDateString.length>=1)&&( _this.addressList.length>=1)&&( _this.address.length>=1)&&( _this.priceTypeName.length>=1)&&( _this.imgIds.length>=1)){
							_this.btnShow = true;
						}else{
							_this.btnShow = false;
						}
					},
					next(){
						let _this = this;
						let arr = [];
						let accountArr = _this.accountArr;
						console.log(accountArr);
						for(let i=0;i<accountArr.length;i++){
							let obj = {
								"labAccountId": accountArr[i].codePreId,
								"labId": accountArr[i].labId,
								"priceTypeId": _this.priceTypeId
							}
							arr.push(obj);
						}
						console.log(arr);
						_this.accountList = arr;
						// this.accountList
						console.log(_this.accountList)
						// let reg1 = /^(0.\d+|1)$/;
						let reg1 = /^(0([\.]?\d*[0-9]+)|0|1)$/;
						if(!(reg1.test(Number(_this.settleRatio)))){
							mui.alert("普检结算比率必须是0-1之间");
						}else if(!(reg1.test(Number(_this.specialSettleRatio)))){
							mui.alert("特检结算比率必须是0-1之间");
						}else{
							_this.titleShow = false;
							_this.modelHide = true;
						}
					},
					/*删除所选图片*/
					delwxIMG(index){
						let _this = this;
						_this.imgIds.splice(index,1);
						_this.imgSrcs.splice(index,1);
					},
					/*上传图片*/
					uploadImg(){
						let _this=this;
						wx.chooseImage({
							count: 1, // 默认9
							sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
							sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
							success: function (res) {
								let localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
								_this.imgSrcs.push(localIds[0]);
								//alert(_this.imgSrcs);
								wx.uploadImage({
									localId: localIds[0], 
									isShowProgressTips: 1, 
									success: function (res) {
										var serverId = res.serverId; 
										_this.imgIds.push(serverId);
										//alert(_this.imgIds);
									}
								});
							}
						});
					},
					/*调用微信接口展示图片*/
					getImg(src){
						let _this=this;
						wx.previewImage({
							current: src, // 当前显示图片的http链接
							urls: _this.imgSrcs// 需要预览的图片http链接列表
						});
					},
					/*许可证到期时间*/
					selectExpire(){
						let _this = this;
						var nowDate = new Date();
						let y = nowDate.getFullYear();
						var dtpicker = new mui.DtPicker({
							type:'date',
							beginYear:y-15,
							endYear:y+15
						});
						dtpicker.show(function(e) {
//						    console.log(e);
							_this.licenseExpiredDateString = e.value;
//							console.log(_this.licenseExpiredDateString);
							dtpicker.dispose();
						}) ;
					},
					selectAdress(){
						let _this =this;
						var picker = new mui.PopPicker({
						    layer: 3
						});
						let address = [];
						let cityData3 = JSON.parse(localStorage.getItem('cityData'));
						console.log(cityData3)
					  picker.setData(cityData3);
						picker.pickers[0].setSelectedIndex(1);
						picker.pickers[1].setSelectedIndex(1);
						picker.pickers[2].setSelectedIndex(1);
						picker.show(function(SelectedItem) {
							console.log(SelectedItem);
							/*省市区显示*/
							_this.addressList = SelectedItem[0].text+' '+SelectedItem[1].text+' '+(SelectedItem[2].text?SelectedItem[2].text:'');
							console.log(_this.addressList);
							/*省市区的名称和编号*/
							_this.addressArr.provinceCode=SelectedItem[0].value;
							_this.addressArr.provinceName=SelectedItem[0].text;
							_this.addressArr.cityCode=SelectedItem[1].value;
							_this.addressArr.cityName=SelectedItem[1].text;
							_this.addressArr.areaCode=SelectedItem[2].value;
							_this.addressArr.areaName=SelectedItem[2].text;
							picker.dispose();
						});
					},
					/*选择价格体系*/
					selectPriceType(){
						let _this = this;
						var picker = new mui.PopPicker();
						let str = [];
						for (let i = 0; i < _this.selectPriceList.length; i++) {
								 let obj = {
										 value: _this.selectPriceList[i].id,
										 text: _this.selectPriceList[i].name,
								 };
								 str.push(obj);
								 console.log(obj);
						}
						console.log(str);
						picker.setData(str);
						picker.show(function (selectItems) {
								_this.priceTypeName=selectItems[0].text;
								_this.priceTypeId=selectItems[0].value;
								console.log(_this.priceTypeName,_this.priceTypeId);
								_this.getAccount(_this.priceTypeId);
						});
					},
					//选择条码前缀
					selectCodePre(acc,index){
						console.log(acc)
						console.log(index)
						let _this = this;
						var picker = new mui.PopPicker();
						let str = [];
						// console.log(_this.codePresArr);
						let codePresArr = acc.list;
						if(codePresArr.length>0){
							for (let i = 0; i < codePresArr.length; i++) {
									 let obj = {
											 value: codePresArr[i].id,
											 text: codePresArr[i].code,
									 };
									 str.push(obj);
									 console.log(obj);
							}
							console.log(str);
							picker.setData(str);
							picker.show(function (selectItems) {
								console.log(selectItems)
									acc.codePreName=selectItems[0].text;
									acc.codePreId=selectItems[0].value;
									// _this.getAccount(_this.labId);
							});
						}else{
							mui.alert('请先维护该实验室账号');
						}
					},
					getAccount(ids){
						let _this = this;
						AT.muiAjax('/partner-sale/partnerSale/getLabAccountByIds','post',{
							ids: ids
						},
						function(res){
							let accountArr = res[0].list;
							let arr = [];
							let codePreName = '';
							let codePreId = '';
							console.log(accountArr);
							for(let i=0;i<accountArr.length;i++){
								console.log(accountArr[i])
								if(accountArr[i].list&&accountArr[i].list.length>0){
									let codePresArr = accountArr[i].list;
									console.log(codePresArr);
									codePreName = codePresArr[0].code;
									codePreId = codePresArr[0].id;
								}else{
									codePreName = '';
									codePreId = '';
								}
								let obj = {
									labId:accountArr[i].labId,
									labName:accountArr[i].labName,
									codePreName:codePreName,
									codePreId:codePreId,
									list:accountArr[i].list
								}
								arr.push(obj);
							}
							_this.accountArr = arr;
							console.log(_this.accountArr);
						});
					},
					/*性别选择*/
					selectSex(){
						let _this = this;
						var picker = new mui.PopPicker();
						picker.setData([{value:'1',text:'女'},{value:'2',text:'男'}]);
						picker.show(function (selectItems) {
						    _this.sexMsg=selectItems[0].text;
						    _this.sexValue=selectItems[0].value;
						})
					},
					/*医生科室*/
					selectClinLeader(){
						let _this = this;
						var picker = new mui.PopPicker();
						
						let str = [];
						for (let i = 0; i < _this.clinLeaders.length; i++) {
						     let obj = {
						         value: _this.clinLeaders[i].code,
						         text: _this.clinLeaders[i].name,
						     };
						     str.push(obj);
						     console.log(obj);
						}
						console.log(str);
						picker.setData(str);
						picker.show(function (selectItems) {
						    _this.clinLeader = selectItems[0].text;
						    _this.clinLeaderCode = selectItems[0].value;
						})
					},
					
					/*擅长病种*/
//					selectGoodDisease(){
//						let _this = this;
//						var picker = new mui.PopPicker();
//						picker.setData([
//							{value:'1',text:'胃病'},
//							{value:'2',text:'肝病'},
//							{value:'3',text:'肠病'},
//							{value:'4',text:'消化道疾病'},
//							]);
//						picker.show(function (selectItems) {
//							_this.str += selectItems[0].text+',';
////							console.log(_this.str);
//							_this.goodDisease = _this.str.slice(0,-1)
////							console.log(_this.goodDisease);
//						})
//					},
					/*从业年限*/
//					selectClinYear(){
//						let _this = this;
//						var picker = new mui.PopPicker();
//						picker.setData([
//							{value:'1',text:'1年'},
//							{value:'2',text:'2年'},
//							{value:'3',text:'3年'},
//							{value:'4',text:'4年'},
//							{value:'5',text:'5年'},
//							{value:'6',text:'6年'},
//							{value:'7',text:'7年'},
//							{value:'8',text:'8年'},
//							{value:'9',text:'9年'},
//							{value:'10',text:'10年'},
//							{value:'11',text:'11年'},
//							{value:'12',text:'12年'},
//							{value:'13',text:'13年'},
//							{value:'14',text:'14年'},
//							{value:'15',text:'15年'},
//							{value:'16',text:'16年'},
//							{value:'17',text:'17年'},
//							{value:'18',text:'18年'},
//							{value:'19',text:'19年'},
//							{value:'20',text:'20年'},
//							]);
//						picker.show(function (selectItems) {
//							_this.clinYear = selectItems[0].value;
//							_this.clinYearMsg = selectItems[0].text;
////							console.log(_this.clinYear);
//						})
//					},
					getDoctorInput(){
						let _this = this;
						if((_this.doctorName.length<1)||( _this.sexMsg.length<1)||( _this.phone.length<1)||( _this.clinLeaderCode.length<1)){	
							_this.submitShow = false;
						}else{
							_this.submitShow = true;
						}
					}, 
					submit(){
						let _this = this;
						let regPhone= /^1[3456789]\d{9}$/;
						if(!(regPhone.test(_this.phone))){
							mui.alert('电话号码有误，请检查');
						}else{
							AT.muiAjax('/partner-sale/partnerSale/createClinic','post',{
								address: _this.address,
								settleRatio:_this.settleRatio,
								specialSettleRatio:_this.specialSettleRatio,
								labId:_this.labId,
								areaCode: _this.addressArr.areaCode,
								areaName: _this.addressArr.areaName,
								cityCode: _this.addressArr.cityCode,
								cityName: _this.addressArr.cityName,
								licenseAddress: _this.licenseAddress,
								licenseExpiredDate: _this.licenseExpiredDateString,
								licenseNo: _this.licenseNo,
								barcode:_this.clinCode,
								name: _this.clinName,
			//						  	proprietorDisease: _this.goodDisease,
								proprietorMobile: _this.phone,
								proprietorName: _this.doctorName,
								proprietorSex: _this.sexValue,
			//						  	proprietorSinceYear: _this.clinYear,
								proprietorSubject: _this.clinLeaderCode,
								proprietorSummary: _this.proprietorSummary,
								provinceCode: _this.addressArr.provinceCode,
								provinceName: _this.addressArr.provinceName,
								wxAttachmentIds: _this.imgIds,
								list:_this.accountList
							},
							function(res){
								_this.show4=true;
								setTimeout(()=>{
									_this.show4 = false;
									location.href='../index.html';
								},1500)	
							})
						}
					}
				}
			})
		</script>
	</body>
</html>
